<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <h1>{{ news }}</h1>
    <button @click="changeMess">点击</button>
    <button @click="changeNews">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    * methods:用于声明要混入到组件实例中的方法
    *详细信息:
           1.声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。
           2.所有的方法都会将它们的 this 上下文自动绑定为组件实例，即使在传递时也如此。
           3.在声明方法时避免使用箭头函数，因为它们不能通过 this 访问组件实例

    * */
    const app = Vue.createApp({
        data() {
            return {
                message: "helloVue3",
                news: "helloVue2"
            }
        },
        methods: {
            changeMess() {
                console.log(this.message)//正常访问
                this.message = 'HELLOVUE'
            },
            changeNews:()=>{
                console.log(this.news) //访问不了
                console.log(this) //window
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
